<template>
	<view class="container">
		<header>
			<view class='orderDetail-nav'>
				<image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" @click="goBack()" />
				<view @click="goBack()">
					<view>{{ orderDetail.status == 0 ? '等待商家付款' : orderDetail.title }} </view>
					<view class="count-down" v-if="orderDetail.status == 0">
						剩余 <u-count-down :time="countdownValue" format="mm分ss秒"></u-count-down> 自动关闭
					</view>
				</view>
			</view>

			<view class='sect-head'>
				<view class='sect-head-top'>
					<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/address-white.png'
						mode='aspectFit|aspectFill|widthFix' alt="" />
					<view>
						<view>{{ orderDetail.takeName }} <text>{{ orderDetail.takePhone }}</text></view>
						<view>{{ orderDetail.takeProvince }} {{ orderDetail.takeCity }} {{ orderDetail.takeArea }}
							{{ orderDetail.takeDetail }}
						</view>
					</view>
				</view>
			</view>
		</header>

		<section>
			<view class="sect-content">
				<view v-if="orderDetail.isPocket">
					<view class='goods-item' v-for="(item, index) in orderDetail.orderDetailList" :key="index">
						<view class='goods-item-img'>
							<img :src="item.thumbnailUrl" mode='aspectFit|aspectFill|widthFix' alt="" />
						</view>
						<view class='goods-item-content'>
							<view class='goods-item-name'>{{ item.productName }}</view>

							<view class="goods-item-tag" v-if="item.limitation == 1">
								{{ item.limitationSell == 0 ? `限购${item.limitationCount}件` :
                  `限购${item.limitationCount}件，第${item.limitationCount + 1}件恢复原价` }}
							</view>

							<view class='goods-item-price' v-if="!item.limitation">
								<view>原价￥<text>{{ item.showPrice }}</text>元</view>
								<view>共{{ item.count }}件</view>
							</view>

							<view class='goods-item-price' v-else-if="item.limitationBuyCount == 0">
								<view>限购价￥{{ item.limitationPrice }}元</view>
								<view>共{{ item.count - item.limitationBuyCount }}件</view>
							</view>

							<view class='goods-price' v-else>
								<view class='goods-item-price' v-if="item.count - item.limitationBuyCount > 0">
									<view>限购价￥{{ item.limitationPrice }}元</view>
									<view>共{{ item.count - item.limitationBuyCount }}件</view>
								</view>

								<view class='goods-item-price'>
									<view>原价￥{{ item.showPrice }}元</view>
									<view>共{{ item.limitationBuyCount }}件</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-else>
					<view class="goods-pocket" v-for="(dtoItem, index) in orderDetail.pocketDTOList" :key="dtoItem.id">
						<view class="goods-pocket-title">
							<text>{{ index + 1 }}号口袋</text>
							<text v-if="dtoItem.logisticsCompany">({{ dtoItem.logisticsCompany }}:{{ dtoItem.logisticsNo }})</text>
						</view>

						<view class="sect-line">
							<image
								src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/faccacac-a9eb-4145-8754-e27e29c1120a.png"
								alt="" mode='widthFix' />
						</view>

						<view class='goods-item' v-for="(item, index) in dtoItem.detailDTOList" :key="index">
							<view class='goods-item-img'>
								<img :src="item.thumbnailUrl" mode='aspectFit|aspectFill|widthFix' alt="" />
							</view>
							<view class='goods-item-content'>
								<view class='goods-item-name'>{{ item.productName }}</view>

								<view class="goods-item-tag" v-if="item.limitation == 1">
									{{ item.limitationSell == 0 ? `限购${item.limitationCount}件` :
                    `限购${item.limitationCount}件，第${item.limitationCount + 1}件恢复原价` }}
								</view>

								<view class='goods-item-price' v-if="!item.limitation">
									<view>原价￥<text>{{ item.showPrice }}</text>元</view>
									<view>共{{ item.count }}件</view>
								</view>

								<view class='goods-item-price' v-else-if="item.limitationBuyCount == 0">
									<view>限购价￥{{ item.limitationPrice }}元</view>
									<view>共{{ item.count - item.limitationBuyCount }}件</view>
								</view>

								<view class='goods-price' v-else>
									<view class='goods-item-price' v-if="item.count - item.limitationBuyCount > 0">
										<view>限购价￥{{ item.limitationPrice }}元</view>
										<view>共{{ item.count - item.limitationBuyCount }}件</view>
									</view>

									<view class='goods-item-price'>
										<view>原价￥{{ item.showPrice }}元</view>
										<view>共{{ item.limitationBuyCount }}件</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class='sect-orderStatus'>
					{{ orderDetail.orderStatus }}
				</view>

				<view class='sect-sum'>
					<view>合计：<view>￥<text>{{ orderDetail.totalPrice }}</text></view>
					</view>
					<view class="sect-sun-realityPrice">
						实付：兜兜卡*
						<text>{{ orderDetail.couponCount }}</text>张
						+ 余额￥<text>{{ orderDetail.balancePrice }}</text>元
						<text>+ 其它￥</text>
						<text v-if="orderDetail.realityPrice >= 0">{{ `${orderDetail.realityPrice}元` }}</text>
					</view>
				</view>

				<view class='sect-order'>
					<view>
						<view>订单编号:</view>
						<view>{{ orderDetail.orderNo }}</view>
					</view>
					<view v-if="orderDetail.remark">
						<view>订单备注:</view>
						<view>{{ orderDetail.remark }}</view>
					</view>
					<view>
						<view>创建时间:</view>
						<view>{{ orderDetail.createTime }}</view>
					</view>
				</view>
			</view>
		</section>

		<footer v-if="orderDetail.status != 1">
			<view class='wait-pay-btn' v-if="orderDetail.status == 0">
				<view @click="onCancelOrder()">取消订单</view>
				<view @click="onPayNow()"> 立即支付 </view>
			</view>

			<view class='wait-pay-btn' v-if="orderDetail.status == 2 && orderDetail.logisticsStatus == 0">
				<view @click="onOrderRefund()">退款</view>
				<view @click="onLogistics()"> 催发货 </view>
			</view>

			<view class='wait-pay-btn' v-if="orderDetail.status == 2 && orderDetail.logisticsStatus == 1">
				<view @click="onLookLogistics()">查看物流</view>
				<view @click="onConfirmTake()">确认收货</view>
			</view>

			<!-- <view class='already-logistics-btn' v-if="orderDetail.status == 2 && orderDetail.logisticsStatus == 1">
				<view class='sect-refund' @click="onOrderRefund()" v-if="refundVisiable">申请退款</view>
				<view class='logistics-btn'>
					<view @click="onLookLogistics()">查看物流</view>
					<view @click="onConfirmTake()">确认收货</view>
				</view>
			</view> -->

			<view class='already-logistics-btn' v-if="orderDetail.status == 4">
				<view class='sect-refund' @click="onOrderRefund()" v-if="refundVisiable">申请退款</view>
				<view class='logistics-btn'>
					<view v-if="orderDetail.refundStatus == 0" @click="onLookLogistics()">查看物流</view>
					<view @click="onAgainOrder()">再来一单</view>
				</view>
			</view>

			<view class='refund-btn' @click="onRefundDetail()"
				v-if="orderDetail.status == 3 && orderDetail.refundStatus == 1">
				查看退款详情</view>
		</footer>

		<uni-popup ref="needPayPopup" style="height: 100%;width: 100%;">
			<view class='modal-confirm'>
				<view @click.stop>
					<view class='modal-confirm-section'>
						<view class='needPay-money'>￥<view>{{ orderDetail.realityPrice }}</view>
						</view>
						<view class='toast-pay'>您的帐户余额不足，剩余请用其它方式支付</view>
						<view class='pay-type'>
							<u-radio-group v-model="needPayType" placement="column">
								<u-radio :name="2" activeColor="#32B499" :customStyle="{ marginBottom: '12px' }">
									<view class='pay-type-cont'>
										<image
											src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/973a7651-00ae-4dc0-8b73-78952c0694f9.png"
											alt="" mode='aspectFit|aspectFill|widthFix' />
										<view>支付宝</view>
									</view>
								</u-radio>

								<u-radio :name="1" activeColor="#32B499">
									<view class='pay-type-cont'>
										<image
											src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/49eb0d0e-e41b-4b0d-80d8-dadaba15d396.png"
											alt="" mode='aspectFit|aspectFill|widthFix' />
										<view>微信支付</view>
									</view>
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class='modal-confirm-footer'>
						<view @click="handleCancel()">取消</view>
						<view @click="handleOk()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<u-modal :show="confirmVisible" showCancelButton content="您确定使用账户余额支付?" closeOnClickOverlay @confirm="confirm"
			@cancel="confirmVisible = false"></u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderDetail: {},
				countdownValue: 0,
				refundVisiable: false,
				needPayType: 2,
				confirmVisible: false,
				wechat: '',
				expressList: [{
						value: 'yuantong',
						label: '圆通速递'
					},
					{
						value: 'yunda',
						label: '韵达快递'
					},
					{
						value: 'zhongtong',
						label: '中通快递'
					},
					{
						value: 'shentong',
						label: '申通快递'
					},
					{
						value: 'jtexpress',
						label: '极兔快递'
					},
					{
						value: 'shunfeng',
						label: '顺丰快递'
					},
					{
						value: 'ems',
						label: 'EMS'
					},
					{
						value: 'jd',
						label: '京东快递'
					},
					{
						value: 'debangkuaidi',
						label: '德邦快递'
					},
					{
						value: 'shunfengkuaiyun',
						label: '顺丰快运'
					},
					{
						value: 'subida',
						label: '速必达'
					},
					{
						value: 'huitongkuaidi',
						label: '百世快递'
					},
				]
			}
		},

		methods: {
			//获取订单详情
			getOrderDetail() {
				this.$request.orderFindById({
					orderId: this.orderId
				}).then(res => {
					if (res.code == 200 && res.isSuccess) {
						const {
							data
						} = res;
						if (data.status == 0) data.orderStatus = '订单即将关闭，建议尽快付款';
						if (data.status == 0) {
							const nowTime = new Date().getTime() / 1000;
							const endTime = new Date(data.createTime).getTime() / 1000 + 30 * 60;
							this.countdownValue = Math.floor(endTime - nowTime) > 0 ? Math.floor(endTime - nowTime) * 1000 : 0;
						}

						switch (data.status) {
							case 1:
								data.title = '已取消';
								break;
							case 3:
								data.title = '退款中';
								break;
							case 4:
								data.title = '已完成';
								break;
							default:
								data.title = '订单详情';
								break;
						}

						if (data.status == 1) data.orderStatus = '订单已取消';

						if (data.status == 2 && data.logisticsStatus == 0) {
							data.orderStatus = '商家还没有发货，请耐心等待';
							data.title = '待发货';
						}
						if (data.status == 2 && data.logisticsStatus == 1) {
							data.orderStatus = '订单已发货，请注意查看物流';
							data.title = '已发货';
						}
						if (data.status == 2 && data.logisticsStatus == 3) {
							data.orderStatus = '您的商品正在退货中';
							data.title = '退货中';
						}

						if (data.status == 3 && data.refundStatus == 1) data.orderStatus = '您的订单正在退货中';
						if (data.status == 3 && data.logisticsStatus == 0 && data.refundStatus == 2) data.orderStatus = '退款成功';
						if (data.status == 3 && data.logisticsStatus == 4) data.orderStatus = '退货成功';

						if (data.status == 4 && data.refundStatus == 2) data.orderStatus = '退货成功，订单已结束';
						if (data.status == 4 && data.refundStatus == 3) data.orderStatus = '退款失败';
						if (data.status == 4 && data.refundStatus == 4) data.orderStatus = '已取消退款';
						if (data.status == 4 && data.logisticsStatus == 2 && data.refundStatus == 0) data.orderStatus = '订单已完成';

						data?.pocketDTOList.map(item => {
							switch (item.logisticsCompany) {
								case 'yuantong':
									item.logisticsCompany = '圆通速递'
									break;
								case 'yunda':
									item.logisticsCompany = '韵达快递'
									break;
								case 'zhongtong':
									item.logisticsCompany = '中通快递'
									break;
								case 'shentong':
									item.logisticsCompany = '申通快递'
									break;
								case 'jtexpress':
									item.logisticsCompany = '极兔快递'
									break;
								case 'shunfeng':
									item.logisticsCompany = '顺丰快递'
									break;
								case 'ems':
									item.logisticsCompany = 'EMS'
									break;
								case 'jd':
									item.logisticsCompany = '京东快递'
									break;
								case 'debangkuaidi':
									item.logisticsCompany = '德邦快递'
									break;
								case 'shunfengkuaiyun':
									item.logisticsCompany = '顺丰快运'
									break;
								case 'subida':
									item.logisticsCompany = '速必达'
									break;
								case 'huitongkuaidi':
									item.logisticsCompany = '百世快递'
									break;
								default:
									break;
							}
						})

						data.isPocket = data?.pocketDTOList.length == 0 ? true : false;
						data.totalPrice = data.totalPrice?.toFixed(2);
						data.balancePrice = data.balancePrice?.toFixed(2);
						data.realityPrice = data.realityPrice?.toFixed(2);
						this.orderDetail = data;
						
						console.log(this.orderDetail,8890)

						if (data.status == 4 && data.logisticsStatus == 2 && data.refundStatus == 0) {
							this.differTime(data.takedTime);
						} else if (data.status == 2 && data.logisticsStatus == 1) {
							this.differTime(data.payTime);
						}
					}
				});
			},

			differTime(lastDate) {
				let nowDate = this.getData()
				lastDate = lastDate?.replace(/-/g, "/");
				let time = this.dateDiff(nowDate, lastDate);
				if (time <= 7) {
					this.refundVisiable = true;
				}
			},
			getData() {
				// 创建一个 Date 对象
				var today = new Date();
				// 获取年、月、日、时、分、秒
				var year = today.getFullYear();
				var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
				var day = today.getDate();
				var hours = today.getHours();
				var minutes = today.getMinutes();
				var seconds = today.getSeconds();

				// 格式化输出
				return year + "/" +
					(month < 10 ? "0" : "") + month + "/" +
					(day < 10 ? "0" : "") + day + " " +
					(hours < 10 ? "0" : "") + hours + ":" +
					(minutes < 10 ? "0" : "") + minutes + ":" +
					(seconds < 10 ? "0" : "") + seconds;
			},
			dateDiff(sDate1, sDate2) { //sDate1和sDate2是yyyy-MM-dd格式
				let aDate, oDate1, oDate2, iDays;
				aDate = sDate1.split("/");
				oDate1 = new Date(sDate1); //转换为yyyy-MM-dd格式
				aDate = sDate2.split("/");
				oDate2 = new Date(sDate2);
				iDays = Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24; //把相差的毫秒数转换为天数
				return iDays; //返回相差天数
			},

			//返回上一级
			goBack() {
				uni.navigateBack();
			},

			//取消订单
			onCancelOrder() {
				uni.navigateTo({
					url: `/pagesA/pocketShop/mine/cancelReason?orderId=${this.orderDetail.orderId}`
				});
			},

			//立即支付
			onPayNow() {
				if (this.orderDetail.realityPrice) {
					// #ifdef MP-WEIXIN
					this.orderWeixinPayFun()
					// #endif
					// #ifndef MP-WEIXIN
					this.$refs.needPayPopup.open('center');
					// #endif
				} else {
					this.confirmVisible = true;
				}
			},
			//小程序微信支付
			orderWeixinPayFun() {
				const {
					orderId,
					cadIdList,
					needPayType,
					orderDetail
				} = this;
				// payWay:0是微信小程序,1微信2支付宝
				const param = {
					userId: orderDetail.userId,
					orderId,
					cadIdList,
					payWay: 0
				}
				uni.showToast({
					title: '加载中',
					icon: 'loading'
				});
				this.$request.orderPay(param).then(res => {
					if(res.data.isNeedPay) {
						const data = JSON.parse(res.data.message);
						const {
							timeStamp,
							nonceStr,
							signType,
							paySign
						} = data;
						uni.requestPayment({
							timeStamp,
							nonceStr,
							package: data.package,
							signType,
							paySign,
							success: function(request) {
								console.log(request, 'request');
								// 支付成功
								uni.redirectTo({
									url: `/pagesA/pocketShop/mine/orderDetail?orderId=${orderId}`
								});
							},
							fail: function(error) {
								console.log(error, 'error');
								// 支付失败
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						});
					} else {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						uni.redirectTo({
							url: `/pagesA/pocketShop/mine/paySuccess?orderId=${orderId}`
						});
					}
					
				})
			},

			//二次确认使用余额支付
			confirm() {
				// #ifdef MP-WEIXIN
				this.orderWeixinPayFun()
				// #endif
				// #ifndef MP-WEIXIN
				this.orderPayFun()
				// #endif
			},

			//使用微信/支付支付
			handleOk() {
				this.orderPayFun();
			},

			//提交支付
			orderPayFun() {
				const {
					orderId,
					cadIdList,
					needPayType,
					orderDetail
				} = this;
				const param = {
					userId: orderDetail.userId,
					orderId,
					cadIdList
				}

				if (Number(orderDetail.realityPrice)) {
					param.payWay = needPayType;
				}

				uni.showToast({
					title: '加载中',
					icon: 'loading'
				});
				console.log(param);
				this.$request.orderPay(param).then(res => {
					if (res.code == 200 && res.isSuccess) {
						console.log(res.data);
						if (res.data.isNeedPay) {
							if (needPayType == 2) {
								const dateObj = res.data.message;
								let reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
								plus.runtime.openURL(dateObj.match(reg)[0])
							} else {
								//余额不足需要跳转微信支付
								let dateObj = JSON.parse(res.data.message);

								plus.share.getServices(service => {
									let weixin = service.find(i => i.id === 'weixin')
									if (weixin) {
										weixin.launchMiniProgram({
											id: "gh_f3a8a1c4d7cf",
											path: `/pages/payIndex/payIndex?rc_result=${JSON.stringify(dateObj)}`,
											type: 0,
											webUrl: ''
										}, res => {
											console.log('res', res)
										}, err => {
											console.log('err', err)
										})
									} else {
										// 没有获取到微信分享服务
										console.log('没有获取到微信分享服务');
									}
								}, err => {
									// 获取分享服务列表失败
									console.log(err);
								})
							}

						} else {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});
							uni.redirectTo({
								url: `/pagesA/pocketShop/mine/paySuccess?orderId=${orderId}`
							});

						}
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
			},

			//取消支付
			handleCancel() {
				this.$refs.needPayPopup.close();
			},

			//催发货
			onLogistics() {
				uni.showToast({
					title: '已通知商家尽快发货',
					icon: 'success'
				});
			},

			//查看物流
			onLookLogistics() {
				const {
					orderDetail
				} = this;
				uni.navigateTo({
					url: `/pagesA/pocketShop/mine/logisticsInfo?orderDetail=${encodeURIComponent(JSON.stringify(orderDetail))}`
				});
			},

			//确认收货
			onConfirmTake() {
				this.$request.orderConfirmTake({
					orderId: this.orderDetail.orderId
				}).then(res => {
					if (res.code == 200 && res.isSuccess) {
						uni.showToast({
							title: '确认收货成功',
							icon: 'success'
						});
						this.getOrderDetail();
					}
				});
			},

			//再来一单
			onAgainOrder() {
				const {
					orderDetail
				} = this;

				let productIdList = [];
				orderDetail?.orderDetailList.map(item => {
					productIdList.push(item.productId);
				})
				const param = {
					userId: orderDetail.userId,
					productIdList,
				};
				this.$request.shoppingAdd(param).then(res => {
					if (res.code == 200 && res.isSuccess) {
						uni.showToast({
							title: '已加入到购物车',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '加入购物车失败',
							icon: 'none'
						});
					}
				});
			},

			//申请退款
			onOrderRefund() {
				uni.navigateTo({
					url: `/pagesA/pocketShop/mine/orderRefund?orderDetail=${encodeURIComponent(JSON.stringify(this.orderDetail))}`
				});
			},

			//退款详情
			onRefundDetail() {
				uni.navigateTo({
					url: `/pagesA/pocketShop/mine/refundDetails?orderDetail=${encodeURIComponent(JSON.stringify(this.orderDetail))}`
				});
			},

		},

		onLoad(options) {
			this.orderId = options.orderId;
			// #ifdef APP-PLUS
			plus.share.getServices(function(s) {
				let share = {};
				for (let i = 0; i < s.length; i++) {
					let t = s[i];
					share[t.id] = t;
				}
				let wechat = share['weixin'];
				this.wechat = wechat;
			}, function(e) {
				console.log(e);
			});
			// #endif
		},

		onShow() {
			this.getOrderDetail();
		},
	}
</script>
<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		font-size: 14px;
		font-family: 'PingFang SC-Medium';
		background-color: #FED14E;
		overflow-y: hidden;
	}

	.container>header {
		width: 100%;
		padding: 50px 12px 30px;
		border-radius: 0 0 20px 20px;
		box-sizing: border-box;
		color: #fff;
		background-color: #32B499;
		background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.orderDetail-nav {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-family: 'PingFang SC-Bold';
	}

	.orderDetail-nav>image {
		width: 8px;
		height: 16px;
		display: block;
		margin-right: 3px;
	}

	.orderDetail-nav>view {
		display: flex;
		align-items: flex-end;
	}

	.orderDetail-nav .count-down {
		font-size: 14px;
		margin-left: 8px;
		display: flex;
	}

	.sect-head {
		border-radius: 8px;
		box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.01);
		padding: 0 12px;
		box-sizing: border-box;
		color: #fff;
	}

	.sect-head .sect-head-top {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 12px 0;
		font-family: 'PingFang SC-Medium';
		box-sizing: border-box;
	}

	.sect-head .sect-head-top image {
		width: 24px;
		height: 24px;
		display: block;
	}

	.sect-head .sect-head-top>view {
		flex: 1;
		padding-left: 12px;
		box-sizing: border-box;
	}

	.sect-head .sect-head-top>view>view:first-child {
		font-family: 'PingFang SC-Bold';
		font-size: 16px;
	}

	.sect-head .sect-head-top>view>view:first-child text {
		font-family: 'DIN-Regular';
	}

	.sect-head .sect-head-top>view>view:last-child {
		font-size: 14px;
	}

	.sect-head .sect-head-top>view>view:last-child text {
		font-family: 'DIN-Regular';
	}

	.container>section {
		height: 100%;
		padding: 0 12px;
		padding-bottom: 60px;
		box-sizing: border-box;
		overflow-y: auto;
		position: relative;
		top: -30px;
	}

	.sect-content {
		height: 100%;
		border-radius: 20px;
		background-color: #fff;
		padding: 12px;
		padding-bottom: 30px;
		box-sizing: border-box;
	}

	.goods-pocket-title {
		font-size: 16px;
	}

	.goods-item {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.goods-item .goods-item-img {
		width: 70px;
		height: 70px;
	}

	.goods-item-img img {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 4px;
	}

	.goods-item .goods-item-content {
		flex: 1;
		height: 70px;
		padding-left: 12px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-item .goods-item-name {
		font-size: 12px;
		font-family: 'PingFang SC-Bold';
		color: #333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 设置超过为省略号的行数 */
		overflow: hidden;
	}

	.goods-item-tag {
		font-size: 10px;
		width: fit-content;
		padding: 2px 5px;
		background: #FDF3F3;
		color: #EA5F5F;
		font-family: 'PingFang SC-Medium';
		border-radius: 4px;
		box-sizing: border-box;
	}

	.goods-item .goods-price {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.goods-item-price {
		display: flex;
		align-items: flex-end;
		margin-right: 12px;
	}

	.goods-item .goods-item-price>view:first-child>text {
		font-size: 16px;
		color: #333333;
		font-family: 'DIN-Medium';
	}

	.goods-item .goods-item-price>view:last-child {
		margin-left: 5px;
		color: #999999;
	}

	.sect-orderStatus {
		width: 100%;
		height: 36px;
		background: #F6F6F6;
		box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.01);
		border-radius: 8px;
		display: flex;
		align-items: center;
		font-family: 'PingFang SC-Medium';
		color: #32B499;
		padding-left: 12px;
		box-sizing: border-box;
		margin-bottom: 12px;
	}

	.sect-line {
		width: 100%;
		margin: 12px 0;
	}

	.sect-sum {
		font-size: 14px;
		text-align: right;
	}

	.sect-sum text {
		font-family: 'DIN-Regular';
	}

	.sect-sum>view:first-child {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.sect-sum>view:first-child>view {
		color: #EA5F5F;
	}

	.sect-sum>view:first-child text {
		font-family: 'DIN-Bold';
		font-size: 20px;
	}

	.sect-order {
		margin-top: 20px;
		padding-top: 12px;
		border-top: 1px solid rgba(241, 241, 241, 0.8);
		box-sizing: border-box;
	}

	.sect-order>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-family: 'PingFang SC-Medium';
		font-size: 14px;
	}

	.sect-order>view>view:first-child {
		width: 80px;
	}

	.sect-order>view>view:last-child {
		font-family: 'DIN-Regular';
		flex: 1;
		text-align: right;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.container>footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 12px;
		padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wait-pay-btn {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.wait-pay-btn>view:first-child {
		color: #666;
		font-size: 10px;
	}

	.wait-pay-btn>view:last-child {
		width: 75%;
		height: 40px;
		border-radius: 23px;
		display: flex;
		align-items: center;
		background-color: #32B499;
		justify-content: center;
		font-family: 'PingFang SC-Medium';
		color: #fff;
	}

	.already-logistics-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.sect-refund {
		color: #666;
		text-decoration: underline;
		font-size: 12px;
	}

	.already-logistics-btn>.logistics-btn {
		width: 80%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #32B499;
		font-family: 'PingFang SC-Medium';
		color: #fff;
		border-radius: 23px;
	}

	.already-logistics-btn>.logistics-btn>view {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.already-logistics-btn>.logistics-btn>view:first-child {
		border-right: 1px solid #fff;
	}

	.refund-btn {
		width: 80%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #32B499;
		font-family: 'PingFang SC-Medium';
		color: #fff;
		border-radius: 23px;
	}

	.modal-confirm {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		height: auto;
		font-size: 14px;
		color: #333;
		box-sizing: border-box;
	}

	.modal-confirm-section {
		padding: 20px 30px;
		border-bottom: 1px solid rgba(241, 241, 241, 0.8);

	}

	.modal-confirm-section>.needPay-money {
		font-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #EA5F5F;
		font-family: 'PingFang SC-Bold';
	}

	.modal-confirm-section>.toast-pay {
		margin-bottom: 12px;
		text-align: center;
		font-size: 12px;
		color: #999999;
	}

	.modal-confirm-section>view text {
		font-size: 20px;
		font-family: 'DIN-Bold';
	}

	.modal-confirm-section .pay-line {
		width: 100%;
		height: auto;
		display: block;
		margin: 12px 0;
	}

	.modal-confirm-section>.pay-type .pay-type-cont {
		display: flex;
		align-items: center;
		font-size: 14px;
		margin-left: 6px;
	}

	.modal-confirm-section>.pay-type .pay-type-cont>image {
		width: 24px;
		height: 24px;
		display: block;
		margin-right: 12px;
	}

	.modal-confirm-footer {
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.modal-confirm-footer>view {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-confirm-footer>view:last-child {
		border-left: 1px solid rgba(241, 241, 241, 0.8);
		color: #32B499;
	}
</style>